<template>
    <div class="progress-bar">
      <div class="progress-bar__fill" :style="{ width: value + '%' }"></div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      value: {
        type: Number,
        default: 0
      }
    }
  };
  </script>
  
  <style scoped>
  .progress-bar {
    width: 100%;
    height: 20px;
    background-color: #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
  }
  .progress-bar__fill {
    height: 100%;
    background-color: #42b983;
    transition: width 0.5s ease-in-out;
  }
  </style>